
<template>
  <div class="main-con flex1">
    <el-row :gutter="12" class="hh hbox">
      <el-col :span="6" class="style-table flex1 vbox">
        <div style="padding:10px 0;">
          <el-button @click="openAddTemp" type="primary">新增面单</el-button>
          <el-button @click="getTemps" type="primary">刷新</el-button>
        </div>
        <el-table :border="true" :highlight-current-row="true" @row-click="rowClick" class="flex1" :data="templates" style="width: 100%">
          <el-table-column prop="name" label="面单名称"></el-table-column>
          <el-table-column prop="width" label="长"></el-table-column>
          <el-table-column prop="height" label="高"></el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.stop="editTemp(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="10" class="hh vbox">
        <div class="flex1">
          <el-card>
            <div slot="header">模板属性定义</div>
            <el-form :model="tempForm" label-width="105px">
              <el-form-item label="字段类型">
                <el-select style="width:100%" v-model="tempForm.type">
                  <el-option v-for="item in formTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="属性名">
                <el-col :span="12">
                  <el-input v-model.trim="tempForm.name" placeholder="属性名如(订单号)"></el-input>
                </el-col>
                <el-col :span="3" class="center">
                  <span>动态</span>
                </el-col>
                <el-col :span="9">
                  <el-radio-group v-model="tempForm.remote">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="字段名">
                <el-col :span="3" class="center">
                  <span>key</span>
                </el-col>
                <el-col :span="9">
                  <el-input v-model="tempForm.field" placeholder="字段名如(orderCode)"></el-input>
                </el-col>
                <el-col :span="3" class="center">
                  <span>value</span>
                </el-col>
                <el-col :span="9">
                  <el-input v-model="tempForm.fieldValue" placeholder="请输入字段值"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="字体样式">
                <el-col :span="3" class="center">
                  <span>大小</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number v-model="tempForm.fontSize" style="width:100%" placeholder="请输入字体大小px"></el-input-number>
                </el-col>
                <el-col :span="3" class="center">
                  <span>加粗</span>
                </el-col>
                <el-col :span="9">
                  <el-radio-group v-model="tempForm.fontWeight">
                    <el-radio label="normal">正常</el-radio>
                    <el-radio label="bold">加粗</el-radio>
                  </el-radio-group>
                  <!-- <el-input v-model="tempForm.fontWeight" style="width:100%" placeholder="请输入字体加粗"></el-input> -->
                </el-col>
              </el-form-item>
              <el-form-item label="字段相对位置">
                <el-col :span="3" class="center">
                  <span>top</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number v-model="tempForm.fieldTop" style="width:100%" placeholder="left px"></el-input-number>
                </el-col>
                <el-col :span="3" class="center">
                  <span>left</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number v-model="tempForm.fieldLeft" style="width:100%" placeholder="top px"></el-input-number>
                </el-col>
              </el-form-item>
              <el-form-item label="字段框高">
                <el-col :span="3" class="center">
                  <span>width</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number v-model="tempForm.width" style="width:100%" placeholder="width px"></el-input-number>
                </el-col>
                <el-col :span="3" class="center">
                  <span>height</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number v-model="tempForm.height" style="width:100%" placeholder="height px"></el-input-number>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button @click="addElement" type="primary">保存属性</el-button>
                <el-button @click="reset">清空</el-button>
                <el-button @click="getFields(true)">预览</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <div class="vbox flex1">
          <el-table class="flex1" :data="fields" height="300px" style="width: 100%;">
            <el-table-column prop="name" label="属性名称"></el-table-column>
            <el-table-column prop="field" label="属性名"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="editField(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click.native.prevent="deleteField(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8" class="hh vbox">
        <el-card>
          <div slot="header">
            面单效果
            <el-button style="margin-left:30px" @click="saveFields" type="primary">保存面单</el-button>
          </div>
          <print-temp :isDrag="true" @dragstoped="dragstoped" :order="testOrder"></print-temp>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="showAddTemp" title="新增面单" center width="28%">
      <el-form ref="temppForm" :rules="rules" :model="temp" label-width="125px">
        <el-form-item label="面单名称">
          <el-input v-model="temp.name" placeholder="请输入面单名称"></el-input>
        </el-form-item>
        <el-form-item label="宽(cm)">
          <el-input-number style="width:100%" v-model="temp.width"></el-input-number>
        </el-form-item>
        <el-form-item label="高(cm)">
          <el-input-number style="width:100%" v-model="temp.height"></el-input-number>
        </el-form-item>
        <el-form-item label="背景图(base64)">
          <el-input type="textarea" :rows="8" v-model="temp.backImg"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTemp">保存</el-button>
        <el-button @click="showAddTemp = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PrintTemp from "./PrintTemp.vue";
export default {
  components: {
    PrintTemp
  },
  data() {
    return {
      tempForm: {
        id: "",
        name: "",
        type: "",
        fieldLeft: 0,
        fieldTop: 0,
        field: "",
        width: 80,
        height: 12,
        fieldValue: "",
        fontSize: 12,
        fontWeight: "normal",
        remote: 1
      },
      formTypes: [
        { name: "文本框", value: "text" },
        { name: "图片", value: "img" },
        { name: "二维码", value: "barcode" }
      ],
      templates: [],
      prints: [],
      con: "",
      options: {},
      formItems: [],
      fields: [],
      backImg: "",
      choseTemp: {},
      testOrder: {},
      showAddTemp: false,
      temp: {
        name: "",
        width: 0,
        height: 0,
        backImg: "",
        id: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入面单名称",
            trigger: "blur"
          }
        ],
        width: [
          {
            required: true,
            message: "请输入面单长度",
            trigger: "blur"
          }
        ],
        height: [
          {
            required: true,
            message: "请输入面单宽度",
            trigger: "blur"
          }
        ],
        backImg: [
          {
            required: true,
            message: "请输入面单背景图",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getTemps();
    this.initPrints();
  },
  watch: {},
  methods: {
    saveTemp() {
      let me = this;
      me.$refs.temppForm.validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "printTemp/save",
            data: me.temp,
            code: "htk",
            success(res) {
              me.getTemps();
              me.showAddTemp = false;
              me.$message.success("保存成功");
            }
          });
        } else {
          return fasle;
        }
      });
    },
    editTemp(row) {
      this.showAddTemp = true;
      this.$nextTick(() => {
        this.$refs.temppForm.resetFields();
        let tempData = Object.assign({}, row);
        this.temp = tempData;
      });
    },
    openAddTemp() {
      this.showAddTemp = true;
      this.$nextTick(() => {
        this.$refs.temppForm.resetFields();
        this.temp = {
          name: "",
          width: 0,
          height: 0,
          backImg: "",
          id: ""
        };
      });
    },
    dragstoped(field) {
      let me = this;
      me.tempForm = field;
      let dragField = me.formItems.find(item => {
        return item.id == field.id;
      });
      if (dragField) {
        me.$set(dragField, "fieldLeft", field.fieldLeft);
        me.$set(dragField, "fieldTop", field.fieldTop);
      }
    },
    reset() {
      this.tempForm = {
        id: "",
        name: "",
        type: "",
        fieldLeft: 0,
        fieldTop: 0,
        field: "",
        width: 80,
        height: 12,
        fieldValue: "",
        fontSize: 12,
        fontWeight: "normal",
        remote: 1,
        printTempId: this.choseTemp ? this.choseTemp.id : ""
      };
    },
    rowClick(row) {
      let me = this;
      me.choseTemp = row;
      me.backImg = row.backImg;
      me.tempForm.printTempId = row.id;

      me.getFields(true);
    },
    editField(row) {
      this.tempForm = row;
    },
    deleteField(row) {
      let me = this;
      me.$http.ajax({
        url: "printTemp/delField/" + row.id,
        code: "htk",
        success(res) {
          me.getFields(true);
        }
      });
    },
    getFields(preview) {
      let me = this;
      me.$http.ajax({
        url: "printTemp/getFields/" + me.tempForm.printTempId,
        code: "htk",
        success(res) {
          me.fields = res;
          me.testOrder = {
            id: 990,
            printTemp: me.choseTemp
          };
          if (preview) {
            me.formItems = res;
            me.testOrder.printTempFields = res;
          }
        }
      });
    },
    saveFields() {
      let me = this;
      me.$http.ajax({
        url: "printTemp/saveFields",
        data: me.formItems,
        code: "htk",
        success(res) {
          me.$message.success("保存成功");
          me.getFields(true);
        }
      });
    },
    addElement() {
      let me = this;
      if (!me.tempForm.printTempId) {
        me.$message.warning("请选择左侧的某一个模板");
        return;
      }
      me.$http.ajax({
        url: "printTemp/saveField",
        data: me.tempForm,
        code: "htk",
        success(res) {
          me.$message.success("保存成功");
          me.getFields(true);
        }
      });
    },
    onChange(value) {
      this.con = value;
    },
    ready() {},
    initPrints() {
      let me = this;
      let isMac = /macintosh|mac os x/i.test(navigator.userAgent);
      if (isMac) {
        return;
      }
      LODOP = getLodop();
      let printCount = LODOP.GET_PRINTER_COUNT();
      console.log(LODOP);
      for (var i = 0; i < printCount; i++) {
        me.prints.push(LODOP.GET_PRINTER_NAME(i));
      }
    },
    savePrintTemp(tmp) {
      let me = this;
      tmp.customStyle = me.con;
      me.$http.ajax({
        url: "printTemp/save",
        data: tmp,
        code: "htk",
        success(res) {
          me.$message.success("保存成功");
          me.getTemps();
        }
      });
    },
    getTemps() {
      let me = this;
      me.$http.ajax({
        url: "printTemp/getList",
        code: "htk",
        success(res) {
          me.templates = res;
        }
      });
    }
  }
};
</script>

<style scoped>
.center {
  text-align: center;
}
.hh {
  height: 100%;
  overflow: hidden;
}
.style-table .el-table__body tr.current-row > td {
  background-color: #00aaff;
  color: #fff;
}
</style>
